<template>
    <el-card style="width: 100%">
      <!-- 搜索栏 -->
      <div style="margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;">
        <el-input v-model="keyword" placeholder="请输入角色名称" style="width: 300px;" clearable @change="onKeywordChange" />
        <el-button type="primary" @click="openAddDialog">新增角色</el-button>
      </div>
  
      <!-- 角色列表表格 -->
      <el-table :data="tableData" :height="view.height - 290" style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="createDate" label="创建时间" width="280" />
        <el-table-column prop="updateDate" label="更新时间" width="280" />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: right;">
        <el-pagination background :current-page="rolePagination.page_index" :page-size="rolePagination.page_size"
          :total="rolePagination.page_total" layout="prev, pager, next" @current-change="onPageChange" />
      </div>
  
      <!-- 新增/编辑角色弹窗 -->
      <el-dialog :title="dialogTitle" v-model="isDialogVisible" width="500px">
        <el-form :model="formData" :rules="formRules" ref="roleForm">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="isDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRole">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import HttpService from "@/api/api";
  
  // 动态高度
  const view = reactive({
    height: window.innerHeight,
  });
  
  // 分页配置
  const rolePagination = reactive({
    page_index: 1,
    page_size: 30,
    page_total: 0,
  });
  
  // 数据
  const keyword = ref("");
  const tableData = ref([]);
  const tableLoading = ref(false);
  const isDialogVisible = ref(false);
  const dialogTitle = ref("新增角色");
  
  // 表单数据和校验规则
  const formData = reactive({
    id: null,
    name: "",
    description: "",
  });
  
  const formRules = reactive({
    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
    description: [{ required: true, message: "请输入描述", trigger: "blur" }],
  });
  
  // 获取角色列表
  const getRoles = () => {
    const params = {
      limit: rolePagination.page_size,
      page: rolePagination.page_index,
      search: keyword.value,
    };
    tableLoading.value = true;
    HttpService.roleManage.roleList(
      params,
      (res) => {
        if (res.status === 200) {
          tableData.value = res.data.data;
          rolePagination.page_total = res.data.total;
        } else {
          ElMessage.error("获取角色列表失败");
        }
        tableLoading.value = false;
      },
      (error) => {
        ElMessage.error("请求失败，请稍后重试");
        tableLoading.value = false;
      }
    );
  };
  
  // 分页切换
  const onPageChange = (newPage: number) => {
    rolePagination.page_index = newPage;
    getRoles();
  };
  
  // 搜索关键字修改事件
  const onKeywordChange = () => {
    rolePagination.page_index = 1;
    getRoles();
  };
  
  // 新增角色
  const openAddDialog = () => {
    dialogTitle.value = "新增角色";
    formData.id = null;
    formData.name = "";
    formData.description = "";
    isDialogVisible.value = true;
  };
  
  // 编辑角色
  const openEditDialog = (row: any) => {
    dialogTitle.value = "编辑角色";
    formData.id = row.id;
    formData.name = row.name;
    formData.description = row.description;
    isDialogVisible.value = true;
  };
  
  // 保存角色
  const saveRole = () => {
    const action = formData.id ? "updateRole" : "addRole";
    const params = { ...formData };
    HttpService.roleManage[action](
      params,
      (res) => {
        if (res.status === 200) {
          ElMessage.success(`${formData.id ? "更新" : "新增"}角色成功`);
          isDialogVisible.value = false;
          getRoles();
        } else {
          ElMessage.error(`${formData.id ? "更新" : "新增"}角色失败`);
        }
      },
      (error) => {
        ElMessage.error("操作失败，请稍后重试");
      }
    );
  };
  
  // 删除角色
  const deleteRole = (id: string) => {
    HttpService.roleManage.deleteRole(
      { id },
      (res) => {
        if (res.status === 200) {
          ElMessage.success("删除角色成功");
          getRoles();
        } else {
          ElMessage.error("删除角色失败");
        }
      },
      (error) => {
        ElMessage.error("删除角色失败，请稍后重试");
      }
    );
  };
  
  // 窗口大小监听
  const updateViewHeight = () => {
    view.height = window.innerHeight;
  };
  
  window.addEventListener("resize", updateViewHeight);
  
  onMounted(() => {
    getRoles();
    updateViewHeight();
  });
  </script>
  
  <style scoped>
  /* 样式根据需求自定义 */
  </style>
  